<template>
  <PageWrapper>
    <div class="update-btn">
      <Button type="primary" @click="handleUpdateRoute">同步路由清单</Button>
    </div>
    <BasicTable
      class="table-wrap"
      rowKey="code"
      :pagination="false"
      :isTreeTable="true"
      :dataSource="dataSource"
      :columns="columns"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex == 'type'">
          <Tag color="orange" v-if="record.type == 1">目录</Tag>
          <Tag color="orange" v-else-if="record.type == 2">菜单</Tag>
          <Tag color="orange" v-else-if="record.type == 3">按钮</Tag>
          <Tag color="orange" v-else-if="record.type == 4">接口</Tag>
          <Tag color="blue" v-else>其他</Tag>
        </template>
        <template v-else-if="column.dataIndex == 'perms'">
          <Tag :key="item" v-for="item in record.ext?.perms">{{ item }}</Tag>
        </template>
        <template v-else-if="column.dataIndex == 'ignoreSync'">
          <span>{{ record.ignoreSync ? '否' : '是' }}</span>
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script>
  import { Button, Tag, message } from 'ant-design-vue';
  import { menuSyncRoute } from '@/api/sys/menu';
  import { asyncRoutes } from '@/router/routes';
  import { PageWrapper } from '@/components/Page';
  import { BasicTable } from '@/components/Table';
  import { omit } from 'lodash-es';
  import { h } from 'vue';
  import { Icon } from '@/components/Icon';

  export default {
    components: {
      PageWrapper,
      BasicTable,
      Button,
      Tag,
    },
    data() {
      return {
        dataSource: [],
        routeData: [],
        filterRoute: ['PageNotFound', 'About'], //需过滤掉的路由地址
        columns: [
          {
            title: '路由标题',
            dataIndex: 'name',
            key: 'name',
            align: 'left',
            customRender({ record }) {
              if (record.icon) {
                return h('span', {}, [
                  h(Icon, {
                    icon: record.icon,
                  }),
                  h(
                    'span',
                    {
                      style: {
                        paddingLeft: '6px',
                      },
                    },
                    record.name,
                  ),
                ]);
              } else {
                return h('span', {}, record.name);
              }
            },
          },
          {
            title: '菜单类型',
            dataIndex: 'type',
            key: 'type',
            width: 100,
          },
          {
            title: '路由名称(权限标识)',
            dataIndex: 'code',
            key: 'code',
          },
          {
            title: '是否同步',
            dataIndex: 'ignoreSync',
            key: 'ignoreSync',
            width: 100,
          },
          {
            title: '可访问权限定义',
            dataIndex: 'perms',
            key: 'perms',
          },
        ],
      };
    },
    mounted() {
      this.dataSource = this.buildRouteList(asyncRoutes);
    },
    methods: {
      buildRouteList(asyncRoutes) {
        const route = [];
        if (!asyncRoutes) return undefined;
        asyncRoutes.forEach((item) => {
          const componentName = item?.meta?.component;
          if (!this.filterRoute.includes(item.name)) {
            let children = this.buildRouteList(item.children);
            if (!children) {
              children = this.buildRouteBtns(item.meta.btns);
            }
            route.push({
              code: item.name,
              name: item.meta.title,
              sort: item.meta.orderNo || 999,
              path: item.path,
              component: componentName,
              type: ['LAYOUT', 'EMPTY_LAYOUT'].includes(componentName) ? 1 : 2,
              ignoreSync: item.meta.ignoreSync,
              icon: item.meta?.icon || '',
              isShow: item?.meta?.hideMenu !== true ? 0 : 1,
              isLink: item?.meta?.isLink === true ? 1 : 0,
              isCache: item?.meta?.ignoreKeepAlive !== true ? 0 : 1,
              isSync: item?.meta?.ignoreSync === true ? 0 : 1,
              openType: 1,
              ext: {
                ...omit(item.meta, ['title']),
              },
              children,
            });
          }
        });
        return route;
      },
      buildRouteBtns(btns) {
        if (!btns || !Object.keys(btns).length) return undefined;
        return Object.keys(btns).map((key) => {
          return {
            code: key,
            name: btns[key],
            type: key.startsWith('btn:') ? 3 : 4,
            isSync: 1,
          };
        });
      },
      handleUpdateRoute() {
        menuSyncRoute(this.dataSource).then(() => {
          message.success('路由同步成功！');
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .table-wrap {
    margin: 12px;
    overflow: hidden;
    border-radius: 8px;
  }

  .update-btn {
    padding: 15px;
    background: #fff;
    text-align: right;
  }
</style>
